<template>
	<view class="content">
		<view v-if="setup===1">
			<view class="content1">
				<view class="title">用户名</view>
				<input class="uni-input" v-model="userName" focus placeholder="请输入用户名" />
			</view>
			<view class="content1">
				<view class="title">密码</view>
				<input class="uni-input" v-model="userPassword" hold-keyboard placeholder="密码必须在5-20位" password=true>
			</view>
			<view class="title">手机号</view>
			<input class="uni-input" v-model="userPhone" focus placeholder="请输入手机号" />
			<view class="title">验证码</view>
			<view class="container">
				<input class="left-view" v-model="verificationCode" focus placeholder="请输入验证码" /> <button
					class="right-view" type="primary" @click="require1">获取验证码</button>
			</view>
			<button class="button1" type="primary" @click="goidentity1">下一步</button>
		</view>
		<!-- 身份证上传view -->
		<view v-if="setup===2">
			<text class="h3">上传身份证照片</text>
			<Rboy-upload-sfz :obverse-url="idCard.obverseUrl" :reverse-url="idCard.reverseUrl"
				@selectChange="sfz_chagne" @del="del_btn"></Rboy-upload-sfz>
			<button class="button1" type="primary" @click="sfz_chagne">下一步</button>
		</view>
		<view v-if="setup===3">
			<!-- 驾驶证上传 -->
			<text class="h3">上传驾驶证照片</text>
			<Rboy-upload-sfz></Rboy-upload-sfz>
			<button class="button1" type="primary" @click="gologin">注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId:'',
				setup: 1,
				userName: '',
				userPassword: '',
				userPhone: '',
				verificationCode: '',
				idCard: {
					// 正面预览地址
					obverseUrl: "",
					// 反面
					reverseUrl: "",
				},
				userId:'',
			}
		},
		methods: {
			// 身份证
			// 上传
			sfz_chagne(e) {
				console.log(e);
				if (e.name == "obverse") {
					this.idCard.obverseUrl = e.tempFilePath
					//发送图片到后端
					uni.uploadFile({
						url: 'http://192.168.43.190:8080/registerIdcard1', //仅为示例，非真实的接口地址
						filePath: this.idCard.obverseUrl,
						name: 'file',
						formData: {
							'userId': userId
						},
						success: (uploadFileRes) => {
							console.log(uploadFileRes.data);
						}
					});
				} else if (e.name == "reverse") {
					this.idCard.reverseUrl = e.tempFilePath
					//发送图片到后端
					uni.uploadFile({
						url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
						filePath: this.idCard.reverseUrl,
						name: 'file',
						// formData: {
						// 	'user': 'test'
						// },
						success: (uploadFileRes) => {
							console.log(uploadFileRes.data);
						}
					});
				}
			},
			// 删除
			del_btn(e) {
				console.log(e);
				if (e.name == "obverse") {
					this.idCard.obverseUrl = ""
				} else if (e.name == "reverse") {
					this.idCard.reverseUrl = ""
				}
			},
			goidentity1() {
				uni.request({
					url: 'http://192.168.43.190:8080/registerFirst?userName=' + this.userName + '&userPassword=' +
						this.userPassword + '&userPhone=' + this.userPhone + '&verificationCode=' + this
						.verificationCode, //你的后端注册接口URL，参数通过URL传递
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded' //设置请求头
					},
					success: (res)=> {
						console.log(res.data);
						// 发请求验证验证码，success中，判断验证成功
						if(res.data.code===200){
							userId:res.data.userId,
							this.setup++
						}
						  console.log(this,555);
						// 在这里你可以添加处理请求成功的代码
					},
					fail: function(res) {
						console.log('request fail:', res.data.msg);
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							position: 'top'
						});
						// 在这里你可以添加处理请求失败的代码
					}
				});
			},
			require1() {
				uni.request({
					url: `http://192.168.43.190:8080/send?phoneNumber=${this.userPhone}`,
					method: 'GET',
					success: function(res) {
						console.log(res.data);
						// 在这里你可以添加处理请求成功的代码
						// 例如，你可以将返回的验证码保存到你的数据模型中
						// this.verificationCode = res.data.verificationCode;
					},
					fail: function(res) {
						console.log('request fail:', res);
						// 在这里你可以添加处理请求失败的代码
						// 例如，你可以向用户显示一个错误消息
					}
				})
			},

			godirve() {
				this.setup++
				// 在这里你可以添加其他步骤的代码
			}
		},
	}
</script>

<style lang="scss">
	.content {
		padding: 50rpx 30rpx;
		background-color: rgb(247, 247, 247);
	}

	.uni-input {
		padding-left: 10px;
		font-size: 14px;
		height: 46px;
		width: 100%;
		background-color: rgb(255, 255, 255);
		border-radius: 30rpx;
	}

	.container {
		display: flex;
		justify-content: space-between;

	}


	.left-view {
		padding-left: 10px;
		font-size: 14px;
		height: 46px;
		width: 60%;
		background-color: rgb(255, 255, 255);
		border-radius: 30rpx;
	}

	.right-view {

		text-align: center;
		height: 46px;
		width: 40%;
		border-radius: 50rpx;
	}

	.title {
		margin: 30rpx 0;
		font-size: 18px;
		font-weight: bold;
	}

	.content1 {
		margin: 50rpx 0;
	}

	.button1 {
		margin-top: 100px;
		height: 46px;
		width: 310px;
		text-align: center;
		border-radius: 50rpx;
	}

	//身份证样式
	.h3 {
		font-weight: bold;
		font-size: 18px;
	}

	.button2 {
		margin-top: 100px;
		height: 46px;
		width: 310px;
		text-align: center;
		border-radius: 50rpx;
	}
</style>